<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!--聊天框 DRAWER组件 -->
 <div id="messages" class="tile drawer animated">
     <div class="listview narrow">
         <div class="media">
             <a href="">Send a New Message</a>
             <span class="drawer-close">&times;</span>
             
         </div>
         <div class="overflow" style="height: 254px">
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/1.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                     <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/2.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">David Villa - 5 Hours ago</small><br>
                     <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/3.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                     <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/4.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                     <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/1.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                     <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/2.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">David Villa - On 16/12/2013</small><br>
                     <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/3.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Harris worgon - On 17/12/2013</small><br>
                     <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/4.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Mitch Bradberry - On 18/12/2013</small><br>
                     <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                 </div>
             </div>
             <div class="media">
                 <div class="pull-left">
                     <img width="40" src="${pageContext.request.contextPath }/back/img/profile-pics/5.jpg" alt="">
                 </div>
                 <div class="media-body">
                     <small class="text-muted">Wendy Mitchell - On 19/12/2013</small><br>
                     <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam accumsan, tincidunt purus</a>
                 </div>
             </div>
         </div>
         <div class="media text-center whiter l-100">
             <a href=""><small>VIEW ALL</small></a>
         </div>
     </div>
 </div>